<template>
    <div class="custom-date-picker">
        <div>
            <el-input v-model="inputValue" :placeholder="placeholder" :prefix-icon="Calendar"
                @mousedown="handleMouseDown" @keydown="handleKeydown" @focus="handleFocus" clearable />
        </div>
        <Teleport to=".layout_container" v-if="showCalendar">
            <div ref="calendarRef"
                :class="{ 'calendar': true, 'calendar-top': direction == 'top', 'calendar-bottom': direction == 'bottom', 'calendar-right': direction == 'right', 'calendar-left': direction == 'left' }"
                :style="{ top: top + 'px', left: left + 'px' }">
                <date-picker :selectedDate="inputValue" @changeValue="changeValue"></date-picker>
            </div>
        </Teleport>
    </div>
</template>

<script setup lang="ts">
import DatePicker from './datePicker.vue';
import { Calendar } from '@element-plus/icons-vue';
import { correctDate } from './correctDate';
import { useEventListener } from '@vueuse/core'
const props = defineProps({
    modelValue: String,
    placeholder: {
        type: String,
        default: '请选择日期',
    },
});
const emit = defineEmits(['update:modelValue']);
const inputValue = ref(props.modelValue);
const calendarRef = ref<HTMLElement | null>(null);
const inputRef = ref<HTMLElement | null>(null);
const onMousedownOutside = (event: MouseEvent) => {
    const target = event.target as Node;
    if (calendarRef.value && !calendarRef.value.contains(target) && !inputRef.value?.contains(target)) {
        hideCalendar();
    }
};
const showCalendar = ref(false);
// 新增处理键盘事件的方法
const handleKeydown = (event: KeyboardEvent) => {
    const key = event.key;
    if (key === 'Backspace' || key === 'Delete') {
        openCalendar(event);
    } else if (/^[0-9a-zA-Z]$/.test(key)) {
        openCalendar(event);
    } else if (key === 'Enter' || key === 'Tab') {
        hideCalendar();
    };
};
const handleMouseDown = (event: MouseEvent) => {
    openCalendar(event);
};
const handleFocus = (event: FocusEvent) => {
    openCalendar(event);
};

let cleanup: any;
let top: number;
let left: number;
let direction: string;
const windowWidth = ref(0);
const windowHeight = ref(0);
const openCalendar = (event: any) => {
    if (showCalendar.value) return;
    inputRef.value = event.target as HTMLElement;
    const rect = inputRef.value.getBoundingClientRect();
    windowWidth.value = window.innerWidth;
    windowHeight.value = window.innerHeight;
    if (windowHeight.value - rect.bottom > 360) {
        direction = 'bottom';
        top = rect.bottom + 10;
        left = rect.left + rect.width / 2 - 180;
    } else if (rect.top > 360) {
        direction = 'top';
        top = rect.top - 355;
        left = rect.left + rect.width / 2 - 180;
    } else if (windowWidth.value - rect.right > 360) {
        direction = 'right';
        left = rect.right + 25;
        top = rect.top + rect.height / 2 - 171;
    } else if (rect.left > 360) {
        direction = 'left';
        left = rect.left - 380;
        top = rect.top + rect.height / 2 - 171;
    } else {
        direction = 'bottom';
        top = rect.bottom + 10;
        left = rect.left + rect.width / 2 - 180;
    }
    showCalendar.value = true;
    cleanup = useEventListener(document.body, 'mousedown', onMousedownOutside, {
        capture: true // 捕获阶段监听
    });
};
const hideCalendar = () => {
    if (!showCalendar.value) return;
    inputRef.value = null;
    top = 0;
    left = 0;
    const dateObj = correctDate(inputValue.value);
    inputValue.value = dateObj.dateStr;
    showCalendar.value = false;
    emit('update:modelValue', inputValue.value);
    cleanup();
};
const changeValue = (val: string) => {
    inputValue.value = val;
    emit('update:modelValue', val);
    showCalendar.value = false;
    cleanup();
}
</script>

<style scoped lang="scss">
.custom-date-picker {
    position: relative;
    display: inline-block;
}

.calendar {
    font-size: 12px;
    color: var(--el-text-color-regular);
    background-color: var(--el-bg-color-overlay);
    position: fixed;
    box-shadow: var(--el-box-shadow-light);    
    border-radius: 4px;
    border: 1px solid var(--el-border-color-light);
    user-select: none;
    z-index: 2000;
}

.calendar-bottom::before {
    content: '';
    position: absolute;
    top: -8px;
    /* 调整以适应边框 */
    left: 50%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    /* 左边的三角形 */
    border-right: 8px solid transparent;
    /* 右边的三角形 */
    border-bottom: 8px solid var(--el-border-color-light);
    /* 底部的三角形 */
    transform: translateX(-50%);
    /* 使三角形居中 */
}

.calendar-bottom::after {
    content: '';
    position: absolute;
    top: -7px;
    /* 根据需要调整这个值 */
    left: 50%;
    /* 居中对齐 */
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    /* 左边的三角形 */
    border-right: 8px solid transparent;
    /* 右边的三角形 */
    border-bottom: 8px solid var(--el-bg-color-overlay);
    /* 底部的三角形 */
    transform: translateX(-50%);
    /* 使三角形居中 */
}

.calendar-top::before {
    content: '';
    position: absolute;
    bottom: -8px;
    /* 调整以适应边框 */
    left: 50%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    /* 左边的三角形 */
    border-right: 8px solid transparent;
    /* 右边的三角形 */
    border-top: 8px solid var(--el-border-color-light);
    /* 底部的三角形 */
    transform: translateX(-50%);
    /* 使三角形居中 */
}

.calendar-top::after {
    content: '';
    position: absolute;
    bottom: -7px;
    /* 根据需要调整这个值 */
    left: 50%;
    /* 居中对齐 */
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    /* 左边的三角形 */
    border-right: 8px solid transparent;
    /* 右边的三角形 */
    border-top: 8px solid var(--el-bg-color-overlay);
    /* 底部的三角形 */
    transform: translateX(-50%);
    /* 使三角形居中 */
}

.calendar-right::before {
    content: '';
    position: absolute;
    left: -8px;
    /* 调整以适应边框 */
    top: 50%;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    /* 左边的三角形 */
    border-bottom: 8px solid transparent;
    /* 右边的三角形 */
    border-right: 8px solid var(--el-border-color-light);
    /* 底部的三角形 */
    transform: translateY(-50%);
    /* 使三角形居中 */
}

.calendar-right::after {
    content: '';
    position: absolute;
    left: -7px;
    /* 根据需要调整这个值 */
    top: 50%;
    /* 居中对齐 */
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    /* 左边的三角形 */
    border-bottom: 8px solid transparent;
    /* 右边的三角形 */
    border-right: 8px solid var(--el-bg-color-overlay);
    /* 底部的三角形 */
    transform: translateY(-50%);
    /* 使三角形居中 */
}

.calendar-left::before {
    content: '';
    position: absolute;
    right: -8px;
    /* 调整以适应边框 */
    top: 50%;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    /* 左边的三角形 */
    border-bottom: 8px solid transparent;
    /* 右边的三角形 */
    border-left: 8px solid var(--el-border-color-light);
    /* 底部的三角形 */
    transform: translateY(-50%);
    /* 使三角形居中 */
}

.calendar-left::after {
    content: '';
    position: absolute;
    right: -7px;
    /* 根据需要调整这个值 */
    top: 50%;
    /* 居中对齐 */
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    /* 左边的三角形 */
    border-bottom: 8px solid transparent;
    /* 右边的三角形 */
    border-left: 8px solid var(--el-bg-color-overlay);
    /* 底部的三角形 */
    transform: translateY(-50%);
    /* 使三角形居中 */
}
</style>